<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>YOUR INPUT ARE</title>
</head>
<body>
	<table width="500" border="1">
	<td><center>GOOD COMPUTER </center></td>
	<td><center>{{ good }}</center></td></tr>
	<td><center>BAD COMPUTER  </center></td>
	<td><center>{{ bad }}</center></td></tr>
	</table>
	<svg xmlns="http://www.w3.org/2000/svg">
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" 
   width="500px" height="400px" 
  viewBox="0 0 1000 800" zoomAndPan="disable"
  <rect style="fill:aliceblue; stroke:blue; stroke-width:10;" x="0" y="100" width="500" height="400"/>
  <line x1="60" y1="120" x2="60"  y2="450" style="stroke:blueviolet;stroke-width:5"/>
  <line x1="57" y1="450" x2="350" y2="450" style="stroke:blueviolet;stroke-width:5;"/>
  
  {% for sc in scale %}
	<line x1="50" y1="{{sc}}" x2="70" y2="{{sc}}" style="stroke:blueviolet;stroke-width:5;"/>
  {% endfor %}
  <text x="40" y="150" font-size="20" text-anchor="middle" fill="black">{{10}}</text>
	<text x="40" y="210" font-size="20" text-anchor="middle" fill="black">{{8}}</text>
	<text x="40" y="270" font-size="20" text-anchor="middle" fill="black">{{6}}</text>
	<text x="40" y="330" font-size="20" text-anchor="middle" fill="black">{{4}}</text>
	<text x="40" y="390" font-size="20" text-anchor="middle" fill="black">{{2}}</text>
	<text x="130" y="470" font-size="15" text-anchor="middle" fill="black">GOOD</text>
	<text x="230" y="470" font-size="15" text-anchor="middle" fill="black">BAD</text>
	<line x1="130" y1="{{gp_good}}" x2="130" y2="448" style="stroke:mediumvioletred;stroke-width:70;"/>
	<line x1="230" y1="{{gp_bad}}" x2="230" y2="448" style="stroke:lightsalmon;stroke-width:70;"/>
  </svg> 
</body>
</html>